<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/default.css">
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <link rel="stylesheet" href="./iframe/personal_2.css">
  <style>

  </style>
</head>

<body>
  <div class="personal_2">
    <table>
      <thead>
        <tr>
          <th scope="col">序号</th>
          <th scope="col">科目</th>
          <th scope="col">时间</th>
          <th scope="col">题量</th>
          <th scope="col">总分</th>
          <th scope="col">考试情况</th>
          <th scope="col">历史成绩 1</th>
          <th scope="col">历史成绩 2</th>
          <th scope="col">历史成绩 3</th>
        </tr>
      </thead>

      <tbody>
        <!-- <tr>
          <th>1</th>
          <th>当代大学生国家安全教育</th>
          <th>04-12 - 11-30</th>
          <th>7</th>
          <th>14.0</th>
          <th>已考</th>
          <th>12.0</th>
          <th>6.0</th>
          <th>14.0</th>
        </tr> -->
      </tbody>
    </table>
  </div>


  <script>
    //得到用户信息 及 登录时存储的令牌
    const user = JSON.parse(localStorage.getItem('exam-data'))
    const token = localStorage.getItem('token')

    // 查找与token匹配的用户
    function findUserByToken(user, token) {
      const index = user.findIndex(user => user.account === token)
      const matchedUser = user[index]
      return { matchedUser, index }
    }
    
    // 调用功能查找用户
    const { matchedUser, index } = findUserByToken(user, token)
    const { name, account, historicalScore: [firstScore = 0, secondScore = 0, thirdScore = 0] } = matchedUser
    console.log(name, account, firstScore, secondScore, thirdScore)
    console.log(name, account, firstScore, secondScore, thirdScore)
    
    const questionList = JSON.parse(localStorage.getItem('questionList'))
    // 题量
    const num = questionList.length
    // 总分
    const score = questionList.length * 2

    // 判断是否已考试
    let status = '缺考'
    status = firstScore === 0 && secondScore === 0 && thirdScore === 0 ? '缺考' : '已考'

    document.querySelector('.personal_2 tbody').innerHTML += `
      <tr>
        <th>${index + 1}</th>
        <th>当代大学生国家安全教育</th>
        <th>04-12 - 11-30</th>
        <th>${num}</th>
        <th>${score}.0</th>
        <th class="red">${status}</th>
        <th>${firstScore}.0</th>
        <th>${secondScore}.0</th>
        <th>${thirdScore}.0</th>
      </tr>
    `
    // 高亮显示缺考
    const red = document.querySelector('.red')
    red.style.color = red.innerHTML === '缺考' ? 'red' : 'black'
  </script>
</body>

</html>